<template>
  <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="100px"
  >
    <el-row :gutter="20">
      <template v-for="(item, index) in formField">
        <el-col :md="12" :lg="8" :xl="6">
          <el-form-item :label="item.label" :prop="item.field">
            <!--文本输入框-->
            <el-input
                v-if="item.inputType == 'string'"
                v-model="formData[item.field]"
                :disabled="item.disabled"
                :style="`width: ${item.width || 200}px`"
            />

            <!--数字输入框-->
            <el-input-number
                v-else-if="item.inputType == 'number'"
                v-model="formData[item.field]"
                :precision="item.precision"
                :step="item.step"
                :max="item.max"
                :disabled="item.disabled"
                style="width: 200px"
            />

            <el-input
                v-else-if="item.inputType == 'inputWithBtn'"
                v-model="formData[item.field]"
                placeholder="请选择..."
                class="input-with-select"
                disabled
                style="width: 200px"
            >
              <template #append>
                <el-button icon="Search" @click="item.searchValue()"/>
              </template>
            </el-input>

            <!--下拉框-->
            <el-select
                v-else-if="item.inputType == 'select'"
                v-model="formData[item.field]"
                :disabled="item.disabled"
                style="width: 200px"
            >
              <el-option
                  v-for="item in item.selectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>

            <!--级联选择-->
            <el-cascader
                v-else-if="item.inputType == 'cascader'"
                v-model="formData[item.field]"
                :options="item.casOptions"
                :props="item.casProps"
                :collapse-tags="item.casCollapse"
                style="width: 200px"
            />

            <el-input
                v-else-if="item.inputType == 'computed'"
                :value="item.getValue()"
                disabled
                style="width: 200px"
            />
            <template v-else>{{ formData[item.field] }}</template>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>


</template>

<script lang="ts" setup name='CustomForm'>
import {} from 'vue'

const props = defineProps({
  formField: {
    type: Array,
    default: []
  },
  formData: {
    type: Object,
    default: {},
  },
  formRules: {
    type: Object,
    default: () => {
    },
  }
})
</script>

<style scoped lang='less'>
.rowBox {
  border: 1px solid #ccc;
  padding: 4px 1px;
  box-sizing: border-box;
  border-radius: 4px;
}
</style>
